<template>
  <el-popover :width="filterWidth ? filterWidth : 220" trigger="hover">
    <template #reference>
      <el-icon :color="iconColor"><Filter /></el-icon>
    </template>
    <template #default>
      <el-date-picker
        v-if="filterType === 'datePicker'"
        :teleported="false"
        v-model="selectDaterange"
        @change="handleDateChange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始"
        end-placeholder="结束"
        value-format="YYYY-MM-DD"
        :shortcuts="shortcuts"
        style="width: 100%"></el-date-picker>
      <el-select
        v-if="filterType === 'select'"
        :teleported="false"
        v-model="selectArray"
        @change="handleSelectChange"
        placeholder="可多选，最多选三个"
        :multiple-limit="3"
        clearable
        filterable
        multiple
        collapse-tags
        collapse-tags-tooltip
        style="width: 100%">
        <el-option v-for="(item, index) in selectOptions" :key="index" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-input v-if="filterType === 'text'" v-model="input" @change="handleInputChange" placeholder="模糊搜索" clearable></el-input>
    </template>
  </el-popover>
</template>
<script setup>
import { watch, defineEmits, defineProps, ref } from "vue";

const iconColor = ref("");
const selectDaterange = ref([]);
const selectArray = ref([]);
const input = ref("");
const props = defineProps({ filterType: String, filterWidth: Number, selectOptions: Array, filterClear: Number });
const emit = defineEmits(["filterChange"]);
// 日期快捷选项
const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const start = new Date();
      const end = new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    },
  },
  {
    text: "最近一个月",
    value: () => {
      const start = new Date();
      const end = new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, end];
    },
  },
  {
    text: "最近三个月",
    value: () => {
      const start = new Date();
      const end = new Date();
      start.setMonth(start.getMonth() - 3);
      return [start, end];
    },
  },
];

// 过滤清除
// 使用场景：由于功能特殊，需要操作别的ui的同时清除过滤可使用此参数
// 使用方法：调用组件时初始化filterClear属性，filterClear为数字类型，需要清除过滤时改变filterClear的值即可触发监听，例如filterClear+=1
watch(
  () => props.filterClear,
  () => {
    if (selectDaterange.value && selectDaterange.value.length > 0) {
      selectDaterange.value = [];
      handleDateChange();
    } else if (selectArray.value && selectArray.value.length > 0) {
      selectArray.value = [];
      handleSelectChange();
    } else if (input.value && input.value.length > 0) {
      input.value = "";
      handleInputChange();
    }
  },
);

const handleDateChange = () => {
  switchIconColor(selectDaterange.value);
  emit("filterChange", selectDaterange.value);
};

const handleSelectChange = () => {
  let selectStr = "";
  if (selectArray.value.length > 0) {
    selectStr = "," + selectArray.value.toString() + ",";
  }
  switchIconColor(selectStr);
  emit("filterChange", selectStr);
};

const handleInputChange = () => {
  switchIconColor(input.value);
  emit("filterChange", input.value);
};

const switchIconColor = (val) => {
  if (val && val.length > 0) {
    iconColor.value = "#409EFF";
  } else {
    iconColor.value = "";
  }
};
</script>
